<!DOCTYPE html>
<html>
<head>
    <title>Projectile Motion Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<canvas id="physicsCanvas" width="550" height="400"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Helper function to draw an arrow
    function drawArrow(ctx, fromX, fromY, toX, toY, headLength = 10) {
        const dx = toX - fromX;
        const dy = toY - fromY;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }
    
    // Helper function to draw a vector symbol above text
    function drawVectorSymbol(ctx, x, y, width) {
        ctx.save();
        ctx.lineWidth = 1.5;
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(x + width, y);
        // Arrowhead for vector symbol
        ctx.moveTo(x + width, y);
        ctx.lineTo(x + width - 4, y - 3);
        ctx.moveTo(x + width, y);
        ctx.lineTo(x + width - 4, y + 3);
        ctx.stroke();
        ctx.restore();
    }
    
    // Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'black';
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 1.5;
    ctx.font = 'italic 20px "Times New Roman"';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // --- Define coordinates and dimensions ---
    const margin = { top: 60, right: 90, bottom: 90, left: 90 };
    const s_pixels = 300;
    const h_pixels = 150;
    
    const originX = margin.left;
    const originY = canvas.height - margin.bottom;
    
    const towerTopX = originX + s_pixels;
    const towerTopY = originY - h_pixels;
    
    const towerWidth = 14;

    // --- Start Drawing ---

    // 1. Draw dashed lines
    ctx.save();
    ctx.setLineDash([6, 4]);
    ctx.lineWidth = 1;
    
    // Horizontal ground line
    ctx.beginPath();
    ctx.moveTo(originX, originY);
    ctx.lineTo(towerTopX, originY);
    ctx.stroke();
    
    // Line connecting the two points
    ctx.beginPath();
    ctx.moveTo(originX, originY);
    ctx.lineTo(towerTopX, towerTopY);
    ctx.stroke();
    
    ctx.restore();

    // 2. Draw tower
    // Tower outline
    ctx.strokeRect(towerTopX - towerWidth / 2, towerTopY, towerWidth, h_pixels);
    // Tower fill (cross-hatch pattern)
    ctx.save();
    ctx.lineWidth = 1;
    const step = 8;
    const towerCenterX = towerTopX;
    for (let y = towerTopY + step/2; y < originY; y += step) {
        ctx.beginPath();
        ctx.moveTo(towerCenterX - towerWidth/2, y - step/2);
        ctx.lineTo(towerCenterX + towerWidth/2, y + step/2);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(towerCenterX + towerWidth/2, y - step/2);
        ctx.lineTo(towerCenterX - towerWidth/2, y + step/2);
        ctx.stroke();
    }
    ctx.restore();


    // 3. Draw projectiles (circles)
    const projectileRadius = 7;
    ctx.save();
    ctx.fillStyle = 'white';
    ctx.beginPath();
    ctx.arc(originX, originY, projectileRadius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.stroke();
    
    ctx.beginPath();
    ctx.arc(towerTopX, towerTopY, projectileRadius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.stroke();
    ctx.restore();
    
    // 4. Draw dimension lines and labels
    // Label 's'
    const s_line_y = originY + 40;
    ctx.beginPath();
    ctx.moveTo(originX, s_line_y - 5);
    ctx.lineTo(originX, s_line_y + 5);
    ctx.moveTo(originX, s_line_y);
    ctx.lineTo(towerTopX, s_line_y);
    ctx.moveTo(towerTopX, s_line_y - 5);
    ctx.lineTo(towerTopX, s_line_y + 5);
    ctx.stroke();
    ctx.fillText('s', originX + s_pixels / 2, s_line_y + 20);

    // Label 'h'
    const h_line_x = towerTopX + 50;
    ctx.beginPath();
    ctx.moveTo(h_line_x - 5, towerTopY);
    ctx.lineTo(h_line_x + 5, towerTopY);
    ctx.moveTo(h_line_x, towerTopY);
    ctx.lineTo(h_line_x, originY);
    ctx.moveTo(h_line_x - 5, originY);
    ctx.lineTo(h_line_x + 5, originY);
    ctx.stroke();
    ctx.fillText('h', h_line_x + 20, originY - h_pixels / 2);
    
    // 5. Draw angle θ
    const angle = Math.atan2(h_pixels, s_pixels);
    const arcRadius = 45;
    ctx.save();
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.arc(originX, originY, arcRadius, 0, -angle, true);
    ctx.stroke();
    ctx.restore();
    ctx.fillText('θ', originX + arcRadius * Math.cos(angle / 2) + 10, originY - arcRadius * Math.sin(angle / 2) - 5);
    
    // 6. Draw velocity vectors and labels
    const vectorLength = 70;
    const dx = towerTopX - originX;
    const dy = towerTopY - originY;
    const dist = Math.sqrt(dx*dx + dy*dy);
    const unitDx = dx / dist;
    const unitDy = dy / dist;

    // Vector from origin
    const v1_toX = originX + vectorLength * unitDx;
    const v1_toY = originY + vectorLength * unitDy;
    drawArrow(ctx, originX, originY, v1_toX, v1_toY);
    ctx.fillText('v', originX + 40, originY - 45);
    ctx.font = 'italic 16px "Times New Roman"';
    ctx.fillText('0', originX + 50, originY - 40);
    ctx.font = 'italic 20px "Times New Roman"';
    drawVectorSymbol(ctx, originX + 40, originY - 55, 12);

    // Vector from tower top
    const v2_toX = towerTopX - vectorLength * unitDx;
    const v2_toY = towerTopY - vectorLength * unitDy;
    drawArrow(ctx, towerTopX, towerTopY, v2_toX, v2_toY);
    ctx.fillText('v', towerTopX - 45, towerTopY + 25);
    ctx.font = 'italic 16px "Times New Roman"';
    ctx.fillText('0', towerTopX - 35, towerTopY + 30);
    ctx.font = 'italic 20px "Times New Roman"';
    drawVectorSymbol(ctx, towerTopX - 45, towerTopY + 15, 12);
    
    // 7. Draw y-axis suggestion
    ctx.save();
    ctx.lineWidth = 1.5;
    drawArrow(ctx, originX, originY + 20, originX, originY - 50, 8);
    ctx.restore();

    // 8. Draw caption
    ctx.font = '22px "SimSun", "STSong"';
    ctx.fillText('习题 1-16 图', canvas.width / 2, canvas.height - 30);

</script>
</body>
</html>